<!--
 * @Author: 迷洛洛ywc
 * @Date: 2024-06-20 13:27:10
 * @LastEditors: 迷洛洛ywc
 * @LastEditTime: 2024-06-28 15:22:04
 * @Description: file content
-->
<template>
  <div class="addLandPage" :class="{
     'hasLand': addShow,
     'hasList': isList
  }">
    <addMap
      ref="addMap"
      @dataList="dataList"
      @toList="toList"
      :landList="landList"
      v-if="mapLoading"
      :baseGeo="baseGeo"
    ></addMap>
    <!-- 弹出层 -->
    <van-popup
        v-model="addShow"
        position="bottom"
        :close-on-click-overlay="!landShow"
        :overlay="landShow"
        :closeable="!isList"
        round
        :style="{ height: isList ? '92vh' : '48vh' }"
      >
        <div v-if="!isList">
          <div class="tit">地块信息</div>
          <div class="addForm">
            <van-field
              v-model="addForm.name"
              label=""
              placeholder="请输入地块名称"
            >
              <template #label>
                地块名称 <span class="redColor">*</span>
              </template>
            </van-field>
            <div class="landType">
              <div class="typeLabel">地块类型<span class="redColor">*</span></div>
              <div
                class="type"
                :class="{ typeActive: typeId === 1 }"
                @click="typeActiveClick(1)"
              >
                田地
              </div>
              <div
                class="type"
                :class="{ typeActive: typeId === 2 }"
                @click="typeActiveClick(2)"
              >
                大棚
              </div>
            </div>
            <van-field
              v-model="addForm.area"
              placeholder="请输入地块面积"
            >
              <template #label>
                地块面积<span class="redColor">*</span>
              </template>
            </van-field>
            <van-field
              v-model="addForm.address"
              type="textarea"
              rows="2"
              autosize
              placeholder="请输入地块地址"
            >
              <template #label>
                地块地址<span class="redColor">*</span>
              </template>
            </van-field>
          </div>
          <div class="formBtn formBtnDelete" v-if="addForm.id">
            <van-icon name="delete-o" class="redColor mr20" @click="toDelete(addForm)"/>
            <van-button type="primary" round @click="submit()"
              >编辑</van-button
            >
          </div>
          <div class="formBtn" v-else>
            <van-button type="primary" round @click="submit()"
              >确定</van-button
            >
          </div>
        </div>
        <div class="listLand" v-else>
          <van-search
            shape="round"
            class="searchVant"
            v-model="value"
            show-action
            placeholder="搜索地块"
          >
            <template #action>
              <div @click="toAdd()">
                <van-icon name="plus" />
                <span>添加</span>
              </div>
            </template>
          </van-search>
          <div class="listBox" v-for="item in landList" :key="item.id" @click="toAdd(item)">
            <img src="../assets/listLand.png" class="listImg" />
            <div class="listInfo">
              <div>
                <span class="listTitie">{{item.name}}</span>
                <span class="listLabel">{{item.type}}</span>
                <span class="listTag">{{item.status === 0 ? '待审核' : '已审核'}}</span>
              </div>
              <div class="listArea">面积：{{item.area}}亩</div>
            </div>
          </div>
          <!-- <div class="noData">
            <img src="../assets/noData.png" />
            <div>没有匹配结果</div>
          </div> -->
        </div>
    </van-popup>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key="name"
        @cancel="onCancel"
        @confirm="onConfirm"
        :loading="loading"
      />
    </van-popup>
  </div>
</template>

<script>
import addMap from '@/components/addMapCopy'
// import wx from 'weixin-js-sdk'

import {
  addLandApi,
  updateLandApi,
  getLandListCopyApi,
  getBaseInfoApi,
  removeLandApi
} from '@/api/addLand'
import { Toast } from 'vant'
export default {
  name: 'ShuzhongtianH5AddLand',
  components: {
    addMap
  },

  data () {
    return {
      value: '',
      addShow: false,
      addForm: {
        geoInfo: '',
        name: '',
        phone: null,
        userId: 0,
        status: 0,
        type: 'DKLX_DP',
        area: 0,
        address: ''
      },
      typeId: 1,
      columns: [],
      loading: true,
      showPicker: false,
      userId: 0,
      landList: [],
      mapLoading: false,
      baseGeo: '',
      landShow: true,
      isList: false // 是否列表
    }
  },

  mounted () {
    this.userId = this.$route.query.userId
    // if (!this.$route.query.isAdd) {
    //   Toast('请按照实际的地块边界绘制，以免生产数据出现偏差')
    // }
    this.getBaseInfo()
    this.getLandList(this.userId)
    // document.title = '添加地块'
    // this.toDelete()
  },

  methods: {

    // 删除地块信息
    toDelete (item) {
      this.$dialog.alert({
        message: '确定删除该地块吗？',
        className: 'dialogOver dialogDelete',
        showCancelButton: true,
        overlayStyle: {
          zIndex: 5000
        }
      }).then(() => {
        // on close
        removeLandApi({ ids: item.id }).then(res => {
          Toast('删除成功')
          this.mapLoading = false
          this.$nextTick(() => {
            this.getLandList()
          })
        })
      })
    },
    // 添加地块
    toAdd (item) {
      this.addForm = this.$options.data().addForm
      this.addShow = false
      this.landShow = false
      this.isList = false
      if (item) {
        this.addForm = {
          ...item
        }
        this.addShow = true
      }
      this.$nextTick(() => {
        if (item) {
          this.$refs.addMap.isAdd(true)
          return
        }
        this.$refs.addMap.isDraw(true)
      })
    },
    // 显示列表
    toList (type) {
      this.isList = type === 1
      if (type === 1) {
        this.addShow = true
        this.landShow = false
      }
      if (type === 2) {
        this.addShow = false
        this.landShow = false
      }
    },
    // 展示已拥有地块
    async getLandList () {
      const res = await getLandListCopyApi({
        userId: this.$route.query.userId
      })
      this.landList = res.data
      this.mapLoading = true
      if (this.$route.query.userId) {
        // this.addForm = { ...res.data[0] }
        this.addShow = true
        this.isList = true
        this.landShow = false
        this.$nextTick(() => {
          this.$refs.addMap.changeList(false)
          if (this.$route.query.isToAdd) {
            this.toAdd()
          }
        })
      }
    },
    // 获取基地经纬度
    async getBaseInfo () {
      if (this.baseId) {
        const res = await getBaseInfoApi(this.baseId)
        this.baseGeo = res.data.baseGeo
      } else {
        console.log('请输入基地ID')
      }
    },
    // 地图数据给到表单
    dataList (e) {
      this.addForm.geoInfo = e.polygonSubmit
      this.addForm.geoCenter = e.polygonCenter
      this.addForm.area = e.area
      this.addForm.address = e.address
      this.addShow = true
    },
    typeActiveClick (val) {
      this.typeId = val
      if (val === 1) {
        this.addForm.type = 'DKLX_DP'
      } else if (val === 2) {
        this.addForm.type = 'DKLX_TD'
      }
    },
    onConfirm (value, index) {
      this.addForm.responsiblePerson = value.userId
      this.addForm.name = value.name
      this.addForm.phone = value.phone
      this.showPicker = false
      this.addShow = true
    },
    onCancel () {
      Toast('取消')
      this.showPicker = false
      this.addShow = true
    },
    submit () {
      this.addForm.userId = this.$route.query.userId
      if (!this.addForm.geoInfo) {
        Toast('请圈出地块')
        return
      }
      if (!this.addForm.name) {
        Toast('请填写地块名称')
        return
      }
      if (!this.addForm.type) {
        Toast('请选择地块类型')
        return
      }
      if (!this.addForm.area) {
        Toast('请填写地块面积')
        return
      }
      if (!this.addForm.address) {
        Toast('请填写地块地址')
        return
      }
      if (this.addForm.id) {
        updateLandApi(this.addForm).then((res) => {
          Toast('编辑成功')
          this.mapLoading = false
          this.$nextTick(() => {
            this.getLandList()
          })
        })
        return
      }
      addLandApi(this.addForm).then((res) => {
        Toast('新增成功')
        this.mapLoading = false
        this.$nextTick(() => {
          this.getLandList()
        })
        // setTimeout(() => {
        // wx.miniProgram.navigateBack({
        //   success: function (e) {
        //     var page = wx.getCurrentPages().pop()
        //     if (page === undefined || page == null) return
        //     page.onLoad() // 刷新数据
        //   }

        // })
        // }, 500)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.addLandPage {
  width: 375px;
  height: 100vh;
}
.tit {
  text-align: center;
  margin: 15px 0 24px 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #0a241b;
}
.addForm {
  .landType {
    display: flex;
    height: 44px;
    line-height: 44px;
    .typeLabel {
      margin-left: 15px;
      color: #646566;
      font-size: 14px;
      margin-right: 20px;
    }
    .type {
      width: 40px;
      height: 25px;
      margin: auto 5px;
      font-size: 12px;
      border: 1px solid #dad7d7;
      border-radius: 5px;
      color: #000;
      text-align: center;
      line-height: 25px;
      font-weight: 600;
    }
  }

  .typeActive {
    background: #00c586;
    color: #ffffff !important;
  }
}
.formBtn {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  ::v-deep .van-button {
    width: 300px;
  }
}
.formBtnDelete {
  ::v-deep .van-button {
    width: 270px;
  }
  ::v-deep .van-icon-delete-o {
    font-size: 24px;
    margin-right: 15px;
  }
}
.redColor {
  color: #F53F3F
}
.hasLand {
  ::v-deep .drawButtonFlex {
    bottom: 49vh;
  }
  ::v-deep .van-overlay {

  }
}
.hasList {
  ::v-deep .drawButtonFlex {
    bottom: 93vh;
  }
}
.listLand {
  padding: 12px 20px
}
.searchVant {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
  ::v-deep .van-search__action {
    padding: 0 0 0 2.13333vw;
    line-height: 1;
    color: #19B763;
    > div {
      display: flex;
      align-items: center;
    }
  }
  ::v-deep .van-icon-plus {
    margin-right: 5px;
    font-size: 18px
  }
  ::v-deep input::placeholder {
    color: #A2A4A7
  }
}
.listBox {
  border: 1px solid #F6F8FC;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 3px;
  display: flex;
  .listImg {
    width: 64px;
    margin-right: 12px;
  }
  .listInfo {
    .listTitie {
      font-size: 14px;
      font-weight: bold;
      margin-right: 10px
    }
    .listLabel {
      color: #fff;
      background: #19B763;
      border-radius: 2px;
      padding: 3px 6px;
      font-size: 12px;
      margin-right: 5px
    }
    .listTag {
      color: #7C7E83;
      background: #E8E9EA;
      border-radius: 2px;
      padding: 3px 6px;
      font-size: 12px;
    }
    .listArea {
      margin-top: 15px;
      font-size: 12px;
      color: #7C7E83
    }
  }
}
.dialogOver {
  z-index: 5001 !important;
}
.noData {
  text-align: center;
  padding-top: 100px;
  color: #7C7E83;
  font-size: 14px;
  > div {
    margin-top: -60px
  }
}

</style>
